<template>
    <div>
      <div  style="margin-bottom: 20px">
        <Input type="text" @on-click="init()" placeholder="请输入关键字" style="width: 164px" v-model="Info.QL_NAME"
               icon="ios-search"/>
        <Button type="primary" @click="init()" style="margin-left: 20px">搜索</Button>
      </div>
        <Table :columns="columns1" :data="data1">
          <template slot-scope="{ row, index }" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px" @click="itemInfoCompare(row)">查看</Button>
          </template>
        </Table>
      <div style="text-align: right;margin-top: 20px">
        <Page :total="Info.total" :page-size="Info.pageSize" show-sizer show-total show-elevator @on-change="pageChange" @on-page-size-change="pageSizeChange"/>
      </div>
      <Modal v-model="itemupdateModal" title="事项信息对比" width="1000">
        <Table :columns="columnsCompare" :data="itemInfoAll">
          <template slot-scope="{ row }" slot="compareNew">
              <span v-if="typeof row.new === 'object'">
                <p v-for="item in row.new" v-bind:key="item.name">
                  {{item.name}}({{item.necessary=='1'?'必填':'非必填'}})
                </p>
              </span>
            <span v-else>{{ row.new }}</span>
          </template>
<!--          <template slot-scope="{ row }" slot="compareOld">-->
<!--              <span v-if="typeof row.old === 'object'">-->
<!--                <p v-for="item in row.old" v-bind:key="item.name">-->
<!--                  {{item.name}}({{item.necessary=='1'?'必填':'非必填'}})-->
<!--                </p>-->
<!--              </span>-->
<!--            <span v-else>{{ row.old }}</span>-->
<!--          </template>-->
        </Table>
      </Modal>
    </div>
</template>

<script>
import { findItemVersionList, getItemUpdateInfo } from '@/api/eventlist'

export default {
  name: 'index',
  data () {
    return {
      itemupdateModal: false,
      columns1: [
        {
          title: '事项编码',
          key: 'ITEM_CODE'
        },
        {
          title: '事项名称',
          key: 'QL_NAME'
        },
        {
          title: '版本号',
          key: 'VERSION'
        },
        {
          title: '版本生效时间',
          key: 'VERSION_DATE'
        },
        {
          title: '操作',
          slot: 'action'
        }
      ],
      data1: [],
      Info: { total: 0, pageNo: 1, pageSize: 10, QL_NAME: '' },
      itemInfoAll: [],
      columnsCompare: [
        { title: '对比值', key: 'key', width: 100, align: 'center' },
        { title: '新信息', slot: 'compareNew', align: 'center' }
        // { title: '原信息', slot: 'compareOld', align: 'left' }
      ],
      compareDict: {
        'a1': '是',
        'a0': '否',
        'state1': '在用',
        'state2': '暂停',
        'state3': '取消',
        'blxs1': '窗口办理',
        'blxs2': '网上办理',
        'blxs3': '快递申请',
        'general': '通办',
        'internet': '网办',
        'seal': '盖章证明',
        'fun': '功能按钮'
      }
    }
  },
  methods: {

    itemInfoCompare (obj) {
      let param = {
        item_code: obj.ITEM_CODE,
        version: obj.VERSION
      }
      // console.log(param)
      this.itemupdateModal = true
      getItemUpdateInfo(param).then(res => {
        if (res.data.errcode === 0) {
          this.itemInfoAll = []
          let temp = res.data.data
          // console.log(temp)
          this.itemInfoAll.push({ id: 0, key: '名称', new: temp.ql_name })
          this.itemInfoAll.push({ id: 1, key: '编号', new: temp.item_code })
          this.itemInfoAll.push({ id: 2, key: '事项ID', new: obj.item_id })
          this.itemInfoAll.push({ id: 3, key: '版本', new: temp.version })
          this.itemInfoAll.push({ id: 4, key: '事项状态', new: this.compareDict['state' + temp.ql_state] })
          this.itemInfoAll.push({ id: 5, key: '是否收费', new: this.compareDict['a' + temp.charge_flag] })
          this.itemInfoAll.push({ id: 6, key: '受理机构', new: temp.sljg })
          this.itemInfoAll.push({ id: 7, key: '办理形式', new: this.compareDict['blxs' + temp.blxs] })
          this.itemInfoAll.push({ id: 8, key: '咨询方式', new: temp.link_tel })
          this.itemInfoAll.push({ id: 9, key: '办理地址', new: temp.accept_address })
          this.itemInfoAll.push({ id: 10, key: '工作时间', new: temp.accept_time })
          this.itemInfoAll.push({ id: 11, key: '受理条件', new: temp.apply_condition })
          this.itemInfoAll.push({
            id: 12,
            key: '承诺时限',
            new: temp.promise_day === -1 ? '即办件' : temp.promise_day + '个工作日'
          })
          this.itemInfoAll.push({ id: 13, key: '时限说明', new: temp.sxsm })
          this.itemInfoAll.push({ id: 14, key: '要件', new: temp.docmentnew })
        } else {
          this.$Notice.error({ title: '失败', desc: res.data.errmsg })
        }
      })
    },
    pageChange (page) {
      this.Info.pageNo = page
      this.init()
    },
    pageSizeChange (e) {
      this.Info.pageSize = e
      this.init()
    },
    init () {
      let data = this.Info
      findItemVersionList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.Info.total = ret.data.data.totalRecord
          this.data1 = ret.data.data.results
        } else {
          this.$Notice.error({
            title: '查询列表失败',
            desc: ret.data.errmsg
          })
        }
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>

</style>
